<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>

    <!-- 百度统计 -->
    <script src="/apps/js/baidu-tongji-mtx.js"></script>

    <!-- Bootstrap 5 CSS -->
    <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="/apps/css/all.min.css" rel="stylesheet">

    <style>
        body {
            background: #f8f9fa;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px 15px 0 0 !important;
            padding: 20px;
        }

        .btn {
            border-radius: 25px;
            padding: 12px 25px;
            font-weight: bold;
            margin: 5px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }

        .btn-success {
            background: #28a745;
            border: none;
        }

        .btn-info {
            background: #17a2b8;
            border: none;
        }

        .btn-warning {
            background: #ffc107;
            border: none;
            color: #212529;
        }

        .preview-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            margin: 0 auto 20px;
        }

        .name {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .position {
            font-size: 16px;
            color: #666;
            margin-bottom: 15px;
        }

        .org-name {
            font-size: 18px;
            color: #333;
            margin-bottom: 20px;
        }

        .org-logo {
            width: 60px;
            height: 60px;
            object-fit: contain;
            margin: 0 auto 15px;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #666;
        }

        .empty-state i {
            font-size: 60px;
            color: #ddd;
            margin-bottom: 20px;
        }

        .share-url {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 10px;
            padding: 15px;
            margin: 20px 0;
            word-break: break-all;
        }

        .copy-btn {
            background: #6c757d;
            border: none;
            border-radius: 20px;
            padding: 8px 15px;
            font-size: 12px;
            margin-left: 10px;
        }

        .stats {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
        }

        .stat-label {
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">
                    <i class="fas fa-id-card"></i> {{title}}
                </h4>
            </div>

            <div class="card-body">
                {{#if hasCard}}
                    <!-- 名片预览 -->
                    <div class="preview-card">
                        {{#if card.avatar}}
                        <img src="{{card.avatar}}" alt="头像" class="avatar">
                        {{else}}
                        <div class="avatar" style="background: #ddd; display: flex; align-items: center; justify-content: center; color: #999;">
                            <i class="fas fa-user" style="font-size: 40px;"></i>
                        </div>
                        {{/if}}

                        <div class="name">{{card.name}}</div>
                        <div class="position">{{card.position}}</div>

                        {{#if card.org_logo}}
                        <img src="{{card.org_logo}}" alt="公司logo" class="org-logo">
                        {{/if}}

                        <div class="org-name">{{card.org_name}}</div>

                        {{#if card.tags}}
                        <div class="mt-3">
                            {{#each card.tags}}
                            <span class="badge bg-light text-dark me-1">{{this}}</span>
                            {{/each}}
                        </div>
                        {{/if}}
                    </div>

                    <!-- 操作按钮 -->
                    <div class="text-center mt-4">
                        <a href="/apps/card/edit" class="btn btn-primary">
                            <i class="fas fa-edit"></i> 编辑名片
                        </a>

                        <a href="/apps/card/{{user.uid}}" target="_blank" class="btn btn-success">
                            <i class="fas fa-eye"></i> 预览名片
                        </a>

                        <button class="btn btn-info" onclick="shareCard()">
                            <i class="fas fa-share-alt"></i> 分享名片
                        </button>

                        <button class="btn btn-warning" onclick="showQRCode()">
                            <i class="fas fa-qrcode"></i> 生成二维码
                        </button>
                    </div>

                    <!-- 分享链接 -->
                    <div class="share-url">
                        <strong>名片链接：</strong>
                        <span id="shareUrl">https://totemlife.cn/apps/card/{{user.uid}}</span>
                        <button class="copy-btn" onclick="copyUrl()">
                            <i class="fas fa-copy"></i> 复制
                        </button>
                    </div>

                    <!-- 统计信息 -->
                    <div class="stats">
                        <div class="stat-item">
                            <div class="stat-number">0</div>
                            <div class="stat-label">浏览次数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">0</div>
                            <div class="stat-label">分享次数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">0</div>
                            <div class="stat-label">保存次数</div>
                        </div>
                    </div>

                {{else}}
                    <!-- 空状态 -->
                    <div class="empty-state">
                        <i class="fas fa-id-card"></i>
                        <h5>您还没有创建名片</h5>
                        <p class="text-muted">创建您的专属电子名片，展示个人品牌和联系方式</p>

                        <a href="/apps/card/edit" class="btn btn-primary btn-lg">
                            <i class="fas fa-plus"></i> 创建名片
                        </a>
                    </div>
                {{/if}}
            </div>
        </div>

        <!-- 返回按钮 -->
        <div class="text-center">
            <a href="/apps" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回应用中心
            </a>
        </div>
    </div>

    <!-- 微信JS SDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
    <!-- Bootstrap JS -->
    <script src="/apps/js/bootstrap.bundle.min.js" defer></script>
    <!-- 微信客户端DOM -->
    <script src="/apps/js/wx-client-dom.js" defer></script>

    <script>
        // 复制链接
        function copyUrl() {
            const url = document.getElementById('shareUrl').textContent;
            navigator.clipboard.writeText(url).then(() => {
                showNotification('链接已复制到剪贴板', 'success');
            }).catch(() => {
                // 降级方案
                const textArea = document.createElement('textarea');
                textArea.value = url;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                showNotification('链接已复制到剪贴板', 'success');
            });
        }

        // 分享名片
        function shareCard() {
            const url = document.getElementById('shareUrl').textContent;
            const title = '{{card.name}} - {{card.org_name}}';
            const desc = '{{card.org_intro}}' || '查看我的名片';

            if (navigator.share) {
                navigator.share({
                    title: title,
                    text: desc,
                    url: url
                });
            } else {
                // 降级到复制链接
                copyUrl();
            }
        }

        // 显示二维码
        function showQRCode() {
            const url = document.getElementById('shareUrl').textContent;
            const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}`;

            // 创建模态框显示二维码
            const modal = document.createElement('div');
            modal.className = 'modal fade';
            modal.innerHTML = `
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">名片二维码</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body text-center">
                            <img src="${qrUrl}" alt="二维码" style="max-width: 200px;">
                            <p class="mt-3 text-muted">扫描二维码查看名片</p>
                        </div>
                    </div>
                </div>
            `;

            document.body.appendChild(modal);
            const bsModal = new bootstrap.Modal(modal);
            bsModal.show();

            modal.addEventListener('hidden.bs.modal', () => {
                document.body.removeChild(modal);
            });
        }

        // 系统通知
        function showNotification(message, type) {
            if (typeof showSystemNotification === 'function') {
                showSystemNotification(message, type);
            } else {
                alert(message);
            }
        }
    </script>
</body>
</html>